import { memo } from 'react'
import { Handle, Position } from 'reactflow'
import type { NodeProps } from 'reactflow'
import { Card, Tag, Space, Typography } from '@arco-design/web-react'
import { IconCodeBlock } from '@arco-design/web-react/icon'
import type { Step } from '@/types'
import './StageNode.css'

const { Text } = Typography

interface StageNodeData {
  name: string
  executionMode: number // 0: Serial, 1: Parallel
  steps: Step[]
  stageId: number
  order: number
}

function StageNode({ data, selected }: NodeProps<StageNodeData>) {
  const executionModeText = data.executionMode === 0 ? '串行' : '并行'
  const executionModeColor = data.executionMode === 0 ? 'blue' : 'green'

  return (
    <div className={`stage-node ${selected ? 'selected' : ''}`}>
      <Handle type="target" position={Position.Left} />

      <Card
        className="stage-node-card"
        size="small"
        title={
          <Space>
            <IconCodeBlock />
            <Typography.Text bold>{data.name}</Typography.Text>
          </Space>
        }
        extra={
          <Tag color={executionModeColor} size="small">
            {executionModeText}
          </Tag>
        }
      >
        <div className="stage-node-content">
          <Text type="secondary" style={{ fontSize: 12 }}>
            步骤数: {data.steps.length}
          </Text>

          {data.steps.length > 0 && (
            <div className="stage-steps-list">
              {data.steps.slice(0, 3).map((step, index) => (
                <div key={step.id || index} className="stage-step-item">
                  <Text ellipsis style={{ fontSize: 11 }}>
                    {index + 1}. {step.name}
                  </Text>
                </div>
              ))}
              {data.steps.length > 3 && (
                <Text type="secondary" style={{ fontSize: 11 }}>
                  还有 {data.steps.length - 3} 个步骤...
                </Text>
              )}
            </div>
          )}

          {data.steps.length === 0 && (
            <div className="stage-empty-state">
              <Text type="secondary" style={{ fontSize: 11 }}>
                暂无步骤，点击配置
              </Text>
            </div>
          )}
        </div>
      </Card>

      <Handle type="source" position={Position.Right} />
    </div>
  )
}

export default memo(StageNode)
